<template>
  <div>
    <svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="#FFFF00" fill-opacity="0.7" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path0 5s linear infinite alternate;" /><path fill="#00FFFF" fill-opacity="0.7" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path1 12.5s linear infinite alternate;" /><path fill="#FF00FF" fill-opacity="0.2" d="M-100 -100L200 -100L200 20L-100 20Z" style="animation: path2 30s linear infinite alternate;" /><path fill="#FF00FF" fill-opacity="0.5" d="M-100 -100L200 -100L200 90L-100 90Z" style="animation: path3 3.9682539682539684s linear infinite alternate;" />
    </svg>
    <div>
      <el-form class="form" label-position="left" :model="form" :rules="rules" ref="form">
        <p class="title">Welcome</p>
        <el-form-item prop="username">
          <el-input v-model="form.role_username" placeholder="请输入管理员账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.role_password" type="password" placeholder="请输入管理员密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="onSubmit()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import httpApi from '@/http'
export default {
  data() {
    return {
      form: {
        role_username: "",
        role_password: ""
      },
      rules: {
        role_username: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          {
            pattern: /^\w{3,15}$/,
            message: "3~15位字符，可以包含：数字、字母、下划线",
            trigger: "blur"
          }
        ],
        role_password: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          {
            pattern: /^\w{6,15}$/,
            message: "6~15位字符，可以包含：数字、字母、下划线",
            trigger: "blur"
          }
        ]
      }
    };
  },

  methods: {
    onSubmit() {
      this.$refs['form'].validate(valid=>{
        if(valid){  // 格式验证通过
          // 调用API接口，发送登录请求即可
          httpApi.adminApi.login(this.form).then(res=>{  
            console.log('登录结果', res)
            if(res.data.code == 200){
              // 将用户对象存入vuex
              this.$store.commit('updateUser',res.data.data.user)
              // 将token也存在vuex中
              this.$store.commit('saveToken',res.data.data.token)
              this.$router.push('/')
              this.$message.success('欢迎回来!')
              httpApi.adminApi.queryRights({role_id:res.data.data.user.id,user_id:res.data.data.user.id}).then(res=>{
                console.log('此用户拥有的权限列表',res);
              })       
            }
            else {
              this.$refs['form'].resetFields()
              this.$message.error('用户名或密码错误')
            }
          })
        }
      })
    }
  }
};
</script>

<style scoped>
.form {
  display: block;
  width: 20%;
  position: absolute;
  top: 30%;
  left: 40%;
}
.form .title {
  text-align: center;
  font-size: 1.5em;
  color: white;
  margin-bottom: 20px;
}
</style>
<style>
      path {
        transform-origin: 50% 0%;
      }
      .background--custom {
        background-color: #FFFFFF;
        position: absolute;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        top: 0;
        left: 0;
      }
      @keyframes path0 {
        0% {
          transform: rotate(-10deg);
        }
        100% {
          transform: rotate(10deg);
        }
      }
      @keyframes path1 {
        0% {
          transform: rotate(-30deg);
        }
        100% {
          transform: rotate(30deg);
        }
      }
      @keyframes path2 {
        0% {
          transform: rotate(40deg);
        }
        100% {
          transform: rotate(-40deg);
        }
      }
      @keyframes path3 {
        0% {
          transform: rotate(40deg);
        }
        100% {
          transform: rotate(-40deg);
        }
      }
    </style>